<template>
  <div>
    <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandle" @onCollapse="collapseHandle" :labelWidth="110" @resetChange="resetChange"></TopFilter>
    <div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="结算趋势图" name="first">
          <settlement-trend-chart :dataList="settlemTreedTableList" :ischart="'first' === activeName && ishow"></settlement-trend-chart>
        </el-tab-pane>
        <el-tab-pane label="B端订单趋势图" name="tow">
          <b-order-trend-chart :dataList="settlemTreedTableListB" :ischart="'tow' === activeName"></b-order-trend-chart>
        </el-tab-pane>
        <el-tab-pane label="C端订单趋势图" name="three">
          <c-order-trend-chart :dataList="settlemTreedTableListC" :ischart="'three' === activeName"></c-order-trend-chart>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import SettlementTrendChart from './SettlementTrendChart';
import BOrderTrendChart from './BOrderTrendChart';
import COrderTrendChart from './COrderTrendChart';
import { settlemTreedTableList, settlemTreedTableListB, settlemTreedTableListC } from '../data.js';
console.log(settlemTreedTableList);

export default {
  name: 'dataTrend',
  data() {
    return {
      activeName: 'first',
      topFilterList: this.createdFrom(),
      settlemTreedTableList: settlemTreedTableList,
      settlemTreedTableListB: settlemTreedTableListB,
      settlemTreedTableListC: settlemTreedTableListC
    };
  },
  props: ['ishow'],
  mounted() {
    this.$forceUpdate();
  },
  components: { SettlementTrendChart, BOrderTrendChart, COrderTrendChart },
  methods: {
    createdFrom() {
      return [
        {
          type: 'SELECT',
          label: '渠道',
          fieldName: 'channel',
          placeholder: '请选择',
          itemList: [
            { text: '全部', value: 60191002 },
            { text: 'B端', value: 60191003 },
            { text: 'C端', value: 60191004 }
          ]
        },
        {
          type: 'SELECT',
          label: '车系',
          fieldName: 'carSeries',
          placeholder: '请选择',
          itemList: [
            { text: '80V', value: 60191002 },
            { text: '60S', value: 60191003 },
            { text: 'X3 Pro', value: 60191004 }
          ]
        }
      ];
    },
    changeHandle(val) {
      console.log(val);
    },
    collapseHandle(val) {
      console.log(val);
    },
    resetChange(val) {
      console.log(val);
    }
  }
};
</script>

<style></style>
